<span id="activity-title"></span> <br>
 <span id="activity-content"></span> <br>

<script type="text/javascript">
    async function typewriter(text, elementId, waitAfter) {
        var n = 0,
            isTag = false
        addText = "";
        const el = document.getElementById(elementId);

        const wait = () => new Promise(r => setTimeout(r, waitAfter));
        const nowait = () => new Promise(r => r());

        const render = () => el.innerHTML = (text.slice(0, n + 1) + addText);

        const cursor = document.createElement('span');
        cursor.id = "blink";

        el.style.setProperty("--cursor-visibility", "visible");
        while (n < text.length) {
            if (text.charAt(n + 1) === "<") isTag = true;
            if (text.charAt(n + 1) === ">") isTag = false;

            if (isTag) {
                n++;
                continue;
            }

            requestAnimationFrame(render);

            if (waitAfter === 0) {
                await nowait();
            } else {
                await wait();
            }

            n++;
        }
        el.style.setProperty("--cursor-visibility", "collapse");
    }

    function parseDelay(d) {
        const parsed = parseInt(d, 10);
        if (isNaN(parsed)) return 0;
        return parsed;
    }

    const titleDelay = parseDelay("{{ .titledelay }}"),
        contentDelay = parseDelay("{{ .contentdelay }}");
    const typeeffetct = async () => {
        await typewriter("{{ .title }}", "activity-title", titleDelay);
        await typewriter("{{ .content }}", "activity-content", contentDelay);
        return;
    }

    typeeffetct()
</script>